<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css" />
</head>
<body>
<div id="header" class="wrap">
	<div id="logo">传习教育网上书城</div>
	<div id="navbar">
		<form method="post" name="search" action="${pageContext.request.contextPath}/book/product?method=search">
			搜索：<input class="input-text" type="text" name="keywords" />
			<input class="input-btn" type="submit" name="submit" value=""/>
		</form>
	</div>
</div>
<div id="register">
	<div class="title">
		<h2>欢迎注册传习教育网上书城</h2>
	</div>
	<div class="steps">
		<ul class="clearfix">
			<li class="current">1.填写注册信息</li>
			<li class="unpass">2.注册成功</li>
		</ul>
	</div>
	<form method="post" action="${pageContext.request.contextPath}/book/user?method=regist">
		<dl>
			<dt>用 户 名：</dt>
			<dd><input class="input-text" type="text" 
			name="username" onblur="checkUser(this.value)" />
			<span id="userTip"></span></dd>
			<dt>密　　码：</dt>
			<dd><input class="input-text" type="password" 
			name="password" id="pwd1" onblur="checkPwd(this.value)"/>
			<span id="pwdTip"></span></dd>
			<dt>确认密码：</dt>
			<dd><input class="input-text" type="password" 
			name="rePassWord" onblur="checkRepwd(this.value)"/>
			<span id="pwd2Tip"></span></dd>
			<dt>Email地址：</dt>
			<dd><input class="input-text" type="email" 
			name="email" onblur="checkEmail(this.value)"/>
			<span id="emailTip"></span></dd>
			<dt> 验证码：</dt>
			<dd>
			<input class="input-text" type="text"
			onblur="inputCode()" name="checkcode"  id="checkcode"/>
  	        <img src="${pageContext.request.contextPath}/imageServlet.do" alt="验证码" id="image" />
	        <a href="javascript:reload();"><label>换一张</label></a>
	        </dd>
			<dt></dt>
			<dd class="button">
			<input class="input-reg" type="submit" 
			name="register" value="" /></dd>
			<span id="mesTip" style="color:red">${msg}</span>
		</dl>
	</form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//TODO 当所有验证完成  点击提交注册的时候  如果有验证失败项 是不允许提交到服务器

function inputCode(){
  $("#mesTip").html(""); 
}

function reload(){
	document.getElementById("image").src="${pageContext.request.contextPath}/imageServlet.do?date="+new Date().getTime();
	  $("#checkcode").val("");   // 将验证码清空
    } 
  function checkEmail(email){
	  if(email==null || email==""){
		  $("#emailTip").html("<font color=red>邮箱不能为空</font>");
		  return;
	  }else{
		 $.ajax({
			 type: "POST",
             url: "${pageContext.request.contextPath }/book/user?method=checkEmail",
             data: "email="+email,
             success: function(data){
            	 if(data=="true"){
            		 $("#emailTip").html("<font color=green>√</font>");
            	 }else{
            		 $("#emailTip").html("<font color=red>该邮箱已被注册!</font> ");
            	 }
             }
		 }); 
	  }
  }
  function checkRepwd(repwd){
	  var pwd= $("#pwd1").val();
	  if(repwd==pwd){
		  $("#pwd2Tip").html("<font color=green>√</font>");
	  }else{
		  $("#pwd2Tip").html("<font color=red>确认密码和密码不相同!</font>");
	  }
  }
  function checkPwd(pwdval){
	  $("#pwdTip").html("");
	  if(pwdval==""){
		  $("#pwdTip").html("<font color=red>密码名不能为空</font>");
		  return;
	  }else if(pwdval.length<5){
		  $("#pwdTip").html("<font color=red>密码名不少于6位数.</font>");
		  return;
	  }else{
		  $("#pwdTip").html("<font color=green>√</font>");
	  }
	  //TODO 密码强度校验
  }
  function checkUser(username){
	  if(username==null || username==""){
		  $("#userTip").html("<font color=red>用户名不能为空</font>");
		  return;
	  }else{
		 $.ajax({
			 type: "POST",
             url: "${pageContext.request.contextPath }/book/user?method=checkUser",
             data: "username="+username,
             success: function(data){
            	 if(data=="true"){
            		 $("#userTip").html("<font color=green>√</font>");
            	 }else{
            		 $("#userTip").html("<font color=red>该用户名已被注册!</font>");
            	 }
             }
		 }); 
	  }
  }
</script>
<div id="footer" class="wrap">
	传习教育网上书城 &copy; 版权所有
</div>
</body>
</html>

